<template>
  <!-- 首页  仪表盘  -->
  <div class="dashboard-container">
    <!--顶部-->
    <header class="header left">
      <div class="header_center left">
        <h1><strong>智慧党建</strong></h1>
      </div>
      <div class="right nav text_right">
        <ul>
          <li>
            <router-link to="/enter">
              控制台
            </router-link>
          </li>
        </ul>
      </div>
    </header>
    <div class="panel-container">
      <div class="con_div">
        <div class="con_div_text left">
          <div class="con_div_text_title">
            行政区划
          </div>
          <div class="con_div_text01 left">
            <div class="right text01_div">
              <p>乡镇总数</p>
              <!-- <p>12356</p> -->
              <count-to :start-val="0"
                        :end-val="12356"
                        :duration="2000"
                        class="card-panel-num" />
            </div>
          </div>
          <div class="con_div_text01 left">
            <div class="right text01_div">
              <p>村总数</p>
              <count-to :start-val="0"
                        :end-val="12356"
                        :duration="2000"
                        class="card-panel-num" />
            </div>
          </div>
          <div class="con_div_text01 left">
            <div class="right text01_div">
              <p>乡镇包含村数</p>
              <count-to :start-val="0"
                        :end-val="12356"
                        :duration="2000"
                        class="card-panel-num" />
            </div>
          </div>
        </div>
        <div class="con_div_text left"
             style="width:23%;">
          <div class="con_div_text_title">
            机关单位
          </div>
          <div class="con_div_text01 left">
            <div class="right text01_div">
              <p>单位总数</p>
              <count-to :start-val="0"
                        :end-val="12356"
                        :duration="2000"
                        class="card-panel-num" />
            </div>
          </div>
          <div class="con_div_text01 right">
            <div class="left text01_div">
              <p>支部总数</p>
              <count-to :start-val="0"
                        :end-val="12356"
                        :duration="2000"
                        class="card-panel-num" />
            </div>
          </div>
        </div>
        <div class="con_div_text left"
             style="width:23%;">
          <div class="con_div_text_title">
            企业
          </div>
          <div class="con_div_text01 left">
            <div class="right text01_div">
              <p>企业总数</p>
              <count-to :start-val="0"
                        :end-val="12356"
                        :duration="2000"
                        class="card-panel-num" />
            </div>
          </div>
          <div class="con_div_text01 right">
            <div class="left text01_div">
              <p>支部总数</p>
              <count-to :start-val="0"
                        :end-val="12356"
                        :duration="2000"
                        class="card-panel-num" />
            </div>
          </div>
        </div>
        <div class="con_div_text left"
             style="width:16%;">
          <div class="con_div_text_title">
            全程纪实
          </div>
          <div class="">
            <div class=" text01_div">
              <p>会议总数</p>
              <count-to :start-val="0"
                        :end-val="12356"
                        :duration="2000"
                        class="card-panel-num" />
            </div>
          </div>

        </div>
      </div>
      <div class="div_any">
        <div class="left div_any01">
          <div class="div_any_child">
            <div class="div_any_title">性别人数</div>
            <!-- <p id="char1"
               class="p_chart"></p> -->
            <!-- 性别人数 -->
            <pie-chart class="p_chart" />
          </div>
          <div class="div_any_child">
            <div class="div_any_title">党员年龄段人数 </div>
            <!-- <p id="char2"
               class="p_chart"></p> -->
            <axis-chart class="p_chart" />
          </div>
        </div>
        <div class="div_any02 left ">
          <div class="div_any_child div_height">
            <div class="div_any_title any_title_width">党员总数</div>
            <bar-chart />
          </div>
        </div>
        <div class="right div_any01">
          <div class="div_any_child">
            <div class="div_any_title">会议总时长及平均会议时长 </div>
            <!-- <p id="char3"
               class="p_chart"></p> -->
            <meet-chart class="p_chart"
                        :type="MeetChartdata.type"
                        :itemName="MeetChartdata.itemName"
                        :sumData="MeetChartdata.sumData"
                        :averageData="MeetChartdata.averageData" />
          </div>
          <div class="div_any_child">
            <div class="div_any_title">各类型会议数量及时长 </div>
            <!-- <p id="char4"
               class="p_chart"></p> -->
            <!-- <meet-type-chart class="p_chart" /> -->
            <meet-chart class="p_chart"
                        :type="MeetTypeChartdata.type"
                        :itemName="MeetTypeChartdata.itemName"
                        :sumData="MeetTypeChartdata.sumData"
                        :averageData="MeetTypeChartdata.averageData"
                        />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import CountTo from 'vue-count-to'
import PieChart from './components/PieChart'
import BarChart from './components/BarChart'
import AxisChart from './components/AxisChart'
import MeetChart from './components/MeetChart'
import MeetTypeChart from './components/MeetTypeChart'
export default {
  name: 'Dashboard',
  components: {
    CountTo,
    PieChart,
    BarChart,
    AxisChart,
    MeetChart,
    MeetTypeChart
  },
  data() {
    return {
      MeetChartdata: {
        type: ['会议总时长', '平均会议时长'],
        itemName: [
          '汶上街道',
          '南站镇',
          '唐驿镇',
          '南旺镇',
          '刘楼镇',
          '次邱镇',
          '寅寺镇',
          '郭楼镇',
          '郭仓镇',
          '杨店镇',
          '军屯乡',
          '白石镇',
          '苑庄镇',
          '义桥镇',
          '中都街道'
        ],
        sumData: [
          null,
          1000,
          1000,
          1000,
          2000,
          2000,
          1000,
          1000,
          4000,
          1000,
          1000,
          1000,
          12000,
          12000
        ],
        averageData: [
          0,
          1000,
          1000,
          1000,
          1000,
          1000,
          1000,
          1000,
          1000,
          1000,
          1000,
          2000,
          2000,
          2000,
          2000
        ]
      },
      MeetTypeChartdata: {
        type: ['数量', '时长'],
        itemName:['支部党员大会', '支部委员会', '党小组会', '党课', '两委换届选举','村两委联席会','村民代表会','民主评议会'],
        sumData: [10, 9,15,3,4,9,8,4],
        averageData: [10, 52, 200, 334, 390,123,556,152]
      }
    }
  },
  methods: {}
}
</script>
<style lang="less" scoped>
@import url('./index');
</style>

